<template>
	<view>
    <z-paging ref="paging" v-model="dataList" @query="queryList" :default-page-size="20">
		<!-- <template #top>
		         <view >
		            
		        11
		         </view>
		       </template> -->
        <view class="item" v-for="(item,index) in dataList" :key="index">
            
	 <fui-card   :title="item.vipTitle" :tag="'¥'+item.totalFee">
	 	<view class="fui-card__content">{{item.description}}</view>
		<view class="fui-card__content">
			<text style="float: right;" @click="openDialog(item.id)"> 开通会员</text>
	   </view>
		 
	 </fui-card>
			  
        </view>
		
		
    </z-paging>
	
	<fui-dialog :show="show" content="确认开通会员?" maskClosable @click="onClick"
		@close="onClose"></fui-dialog>
		</view>
</template>

<script>
    export default {
        data() {
            return {
				// v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
                dataList: [],
				show: false,
				createOrderReq:{
					 userId:"",
					vipGoodsId:""
				}
				 
            };
        },
		onLoad() {
			 
			 let user=uni.getStorageSync("user")
			 this.createOrderReq.userId=user.userId;
		},
        methods: {
			// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用this.$refs.paging.reload()即可
            queryList(pageNo, pageSize) {
				
				 this.$request.post('vip/goods/list', {pageNum:pageNo,pageSize:pageSize}).then(res => {
				 	 this.$refs.paging.complete(res.data.dataList);
				 }).catch(res => {
                	 
                	this.$refs.paging.complete(false);
                })
            },
      
		
		openDialog(gid) {
		createOrderReq.vipGoodsId=gid;
		this.show = true
		},
		onClick(e) {
			this.$request.post('order/createOrder', createOrderReq).then(res => {
			 	 if(res.code == 200){
					 
					    uni.requestPayment({
					             "provider": "wxpay",//支付方式  
					             "timeStamp":res.data.timeStamp,//时间戳
					             "nonceStr":res.data.nonceStr,//随机字符串
					             "package":res.data.package,//接口返回的prepay_id
					             "signType":res.data.signType,//签名算法，需要与后台下单时一致
					             "paySign":res.data.paySign,
					             success: function (resSuccess) {
					                 //触发该success时已经是输入密码支付成功后触发，可做一些页面跳转和成功提示                       
					              },
					                                      
					             fail: function (err) {
					                 //支付失败时出发，比如取消支付、余额不足等
					             }
					         });
					 this.onClose()
				 }
			 }) 
			
		},
		//设置maskClosable为true时（点击遮罩可关闭），需要配合@close事件一起使用，通过控制show来达到关闭效果
		onClose(e) {
			this.show = false
		},
 },
	
    };
</script>

<style>



	.fui-text__explain {
		font-size: 28rpx;
		color: #7F7F7F;
		flex-shrink: 0;
	}

 
</style>